<template>
	<view :class="['van-grid', 'van-grid-' + columnNum]">
		<slot/>
	</view>
</template>
<script>
export default {
    data(){
        return {
		}
    },
    props: {
		gutter: {
			type: Number,
			default: 0
		},
		columnNum: {
			type: Number,
			default: 4
		},
		border: {
			type: Boolean,
			default: false
		}
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
	.van-grid{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100%;
		&.van-grid-3{
      :deep(.van-grid-item){
				flex-basis: 33.3333%;
				.van-image{
					width: 100%;
					height: calc((100vw - 60px)/3) !important;
				}
			}
		}
		&.van-grid-4{
      :deep(.van-grid-item){
				flex-basis: 25%;
			}
		}
	}
</style>